ReactのMain Concept:4. Components and Props
Components and Props
ComponentsはUIを独立した再利用可能なピースにして、独立しておのおののピースを考えることができるようにする
概念的には、componentsはJSのfunctionsのようなもの
Functional and Class Components
JSのfunctionのようにかけるcomponentを"fuctional"と呼ぶ
ES6のclassをつかってcomponentを作ることもできる
functionalな方もclassを使った方も同じ
classはもっといろいろなことができる
Rendering a Component
独自のcomponentをelementにわたすことができる
ユーザ定義のcomponentを表すelementが利用されたら、そのattributeをオブジェクトとしてcomponentにわたす。このオブジェクトがprops (React) componentの名前は大文字で書く
o<Welcome />
x<welcome />
Composing Components
componentはcomponentを呼べる
ボタン、ダイアログみたいな単位でコンポーネントを作っておけば使い回せる
Reactを既存のアプリに組み込みたいときは、Buttonのような小さなコンポーネントからつくって徐々にrootまでいくのがよい
Extracting Components:コンポーネント分割の方法
コンポーネントを分ける際に、コンポーネント内の変数名はコンポーネント自身の視点でつけ直すのがオススメ
そのまま切り出すと、外側の知識が入る
どんどん分割していくと、n段目の子要素がどんなオブジェクトを期待しているかわからなくなりそう(インタフェースに依存するようにしないと無理がある)kadoyau.icon
分割めんどくさいけど再利用できるモジュールが増えて大きなアプリ作るときはいいよ!(ButtonとかPanelとか使い回すでしょ?)
複雑なものをブレイクダウンするのもいいよ!
Props are Read-Only
Reactには一つの厳格なルールがある
すべてのReactのcomponentは与えられたpropsに対してpure functionのように振る舞わなければならない
動的に変化させたいときは次章で説明するstateを使う